<template>
  <div class="wrap">
    <div class="wpn">
      <div class="form-data pos">
        <div>
          <p class="p-input pos">
            <input
              type="text"
              placeholder="输入手机号"
              id="tel"
              autocomplete="off"
              v-model="phone"
              @input="onPhoneChange"
            />
            <span :class="[{ hide: userNoError }, 'tel-warn']">
              <q-icon name="error" />
            </span>
          </p>
          <p class="p-input pos" id="pwd">
            <input
              v-model="password"
              placeholder="输入密码"
              type="password"
              id="passport"
              @input="onPasswordChange"
            />
            <span :class="[{ hide: passwordNoError }, 'tel-warn']">
              <q-icon name="error" />
            </span>
          </p>
        </div>
        <div :class="[{ hide: loginNoError }, 'bottom-info']">
          错误:{{ errMessage }}
        </div>
        <button class="lang-btn" @click="login">登录</button>
        <div class="bottom-info">
          没有账号，马上
          <a href="#/user/reg">注册</a>
          <br />
          有账号,
          <a href="#/user/forget">忘记密码</a>
        </div>
        <p class="right">Powered by © 2021</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      password: "",
      userNoError: true,
      passwordNoError: true,
      loginNoError: true,
      errMessage: "用户名或密码错误.",
    };
  },
  methods: {
    async login() {
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        return;
      }
      if (!/^.{6,40}$/.test(this.password)) {
        return;
      }

      try {
        // 登录api服务端
        // let pwd = that.$utils.encryption(that.password);
        let data = await this.$business.login(this.phone, this.password);
        // 如果登录出错
        if (data.state === -1) {
          this.errMessage = "登录出错.";
          this.loginNoError = false;
          return;
        } 

        this.$store.commit("updateAccount", data.user);
        this.$router.push({ path: "/", params: {} });
      } catch (err) {
        this.errMessage = err;
        this.loginNoError = false;
      }
    },
    async sendCode() {
      try {
        this.$utils.setValue("phone", this.phone);
        let res = await this.$account.getValidateCode({ phone: this.phone });
        this.code = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    onPhoneChange() {
      this.userNoError = /^1[3456789]\d{9}$/.test(this.phone);
      this.loginNoError = true;
    },
    onPasswordChange() {
      this.passwordNoError = /^.{6,40}$/.test(this.password);
      this.loginNoError = true;
    },
  },
  mounted() {
    try {
      // 退出登录后重新登录,自动填写
      let acc = this.$utils.getJsonObj("current_user");
      let pwd = this.$utils.getValue("password", pwd);
      if (acc) {
        this.phone = acc.phone;
      }
      if (pwd) {
        this.password = pwd;
      }
    } catch (err) {
      console.log(err);
    }
  },
};
</script>

<style scoped>
@import "~@/assets/css/user.css";
input::placeholder {
  font-size: 12px;
  font-family: Arial;
}
.loginError {
  display: block;
  color: #111;
}
</style>